<!DOCTYPE html>
<html lang="en">

<head>
    <link href='http://cdn.repository.webfont.com/webfonts/nomal/153429/45824/655df2076f50f60698ce8070.css'
        rel='stylesheet' type='text/css' />
    <meta charset="UTF-8">
    <title>Happy Birthday!</title>



    <link rel="stylesheet" href="css.css">


</head>

<body>

    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <bokeh></bokeh>
    <div class="mobile">最大化查看</div>
    <div class="pyro">
        <div class="before"></div>
        <div class="after"></div>
    </div>
    <div style="cursor: pointer;">
        <h1>Feliz Cumpleaños Pratik!</h1>
        <h2>Happy Birthday SailorMoon</h2>
        <div class="candle">
            <div id="flame" class="lit"></div>
        </div>
    </div>


    <div class="cake" onclick="playMusicAndShowText()"></div>
    <div class="plate"></div>




    <span id="text-container" class="spaneeee"></span>


    <audio id="bgmusic"
        src="http://m10.music.126.net/20240303160436/854db09ead4ce6fce323a54d7b21b2f3/ymusic/0509/0752/5108/2c1e915b6c08a5667aeefb40a61427ad.mp3"
        autoplay="autoplay" loop="loop" style="display: block; width: 3%; height:3%;"></audio>


    <script type="text/javascript">
        function toggleSound() {
            var music = document.getElementById("bgmusic");
                music.play(); // 播放
        }

        //禁用滚动条
        document.documentElement.style.overflowY = 'hidden';

        function playMusicAndShowText() {
            toggleSound(); // 启动音乐

            const text = "hello，小英\n\n成长不期而遇，生日如期而至\n\n今天是你的生日呢！\n\n恭喜这位过生日的女孩又可爱了一岁\n\n有幸遇见，难能相聚\n\n希望你能够在最好的年纪做最好的自己\n\n永远你能够永远开心\n\n希望你是能披荆斩棘的大英雄\n\n能斩破所有的难关\n\n希望你可以被时光温柔所待\n\n万事胜意，生日快乐！\n\n不管几岁，你的快乐万岁 ( ๑❛ᴗ❛๑ ) ";
            const lines = text.split("\n");
            let lineIndex = 0;
            let charIndex = 0;

            const textContainer = document.getElementById("text-container");
            const displayText = () => {
                if (lineIndex < lines.length) {
                    const characters = lines[lineIndex].split('');

                    if (charIndex < characters.length) {
                        textContainer.innerHTML += characters[charIndex];
                        charIndex++;
                    } else {
                        charIndex = 0;
                        lineIndex++;
                        textContainer.innerHTML += "<br>";
                    }
                } else {
                    // 文本显示完毕后停止定时器
                    clearInterval(timer);
                }
            };

            // 设置一个定时器，每 100 毫秒显示一次文本
            const timer = setInterval(displayText, 100);
        }
    </script>

</body>

</html>